<script setup>
import { ref } from 'vue'
import { Toast } from 'vant'
import axiosInstance from '@/utils/request'
import { TOKEN } from '@/utils/constant'
import { useUserStore } from '@/stores/user'
const store = useUserStore()
const content = ref('') // 文本内容
const fileList = ref([]) // 图片文件列表
const contentFile = ref([])
// 读取文件后回调
const afterRead = async (file) => {
  // 使用临时 URL 来预览图片，而不实际上传
  const previewUrl = URL.createObjectURL(file.file)
  file.previewUrl = previewUrl // 将预览 URL 添加到文件对象中
  console.log(fileList.value) // 查看预览效果
  showToast('图片添加成功')
}

// 删除图片前的确认
const beforeDelete = (file) => {
  const index = fileList.value.findIndex(
    (item) => item.previewUrl === file.previewUrl
  )
  if (index !== -1) {
    fileList.value.splice(index, 1) // 删除指定的文件
  }
  showToast('图片删除成功')
}
// 上传文件
const uploadFile = (file) => {
  return new Promise((resolve, reject) => {
    // 返回一个 Promise
    const formData = new FormData()
    formData.append('file', file.file)

    axiosInstance
      .post('/oss/upload/friend-circle', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          TOKEN: store.token
        }
      })
      .then((response) => {
        resolve(response.data.imageUrl) // 通过 resolve 返回 URL
      })
      .catch((error) => {
        console.error(error)
        reject(error) // 通过 reject 处理错误
      })
  })
}
const sendFriendCircle = () => {
  axiosInstance
    .post(
      '/friend-circle/send',
      {
        content: content.value,
        contentFiles: contentFile.value
      },
      {
        headers: {
          TOKEN: store.token
        }
      }
    )
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

// 提交按钮的操作
const submitMoment = async () => {
  if (!content.value) {
    showToast('请填写内容')
    return
  }
  // 上传所有文件并收集 URL
  contentFile.value = await Promise.all(
    fileList.value.map(async (fileItem) => {
      const imgUrl = await uploadFile(fileItem) // 等待每个文件上传
      console.log(imgUrl)
      if (imgUrl) {
        contentFile.value.push(imgUrl) // 添加成功的 URL
      }
      return imgUrl // 返回 URL（或 null）
    })
  )
  // 发送添加朋友圈请求
  sendFriendCircle()
  console.log('发布的朋友圈内容:', contentFile.value, content.value)
  showSuccessToast('发送成功！')

  // 清空内容和图片
  content.value = ''
  fileList.value = []
}
</script>
<template>
  <NavBarHeader>
    <template #title>添加朋友圈</template>
  </NavBarHeader>
  <div class="post-moment">
    <!-- 文本输入框 -->
    <van-field
      v-model="content"
      placeholder="这一刻的想法..."
      rows="5"
      type="textarea"
    />

    <!-- 图片上传 -->
    <van-uploader
      v-model="fileList"
      multiple
      :max-count="9"
      max-size="500 * 1024"
      :after-read="afterRead"
      :before-delete="beforeDelete"
    />

    <!-- 提交按钮 -->
    <van-button type="primary" block @click="submitMoment">发送</van-button>
  </div>
</template>
<style scoped>
.post-moment {
  padding: 16px;
}
</style>
